<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.account" placeholder="账号" class="handle-input mr10" clearable></el-input>
                <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button type="primary" :icon="Plus" @click="handleAdd" v-permiss="12">新增</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
                      v-loading="pageLoading">
                <el-table-column prop="id" label="编号" width="55" align="center"></el-table-column>
                <el-table-column prop="account" label="账号"></el-table-column>
                <el-table-column prop="password" label="密码" min-width="120"
                                 :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="role" label="角色" min-width="80" :show-overflow-tooltip="true">
                    <template #default="scope">
                        <span v-if="scope.row.role === 1">客户</span>
                        <span v-if="scope.row.role === 2">公司管理员</span>
                        <span v-if="scope.row.role === 3">系统管理员</span>
                    </template>
                </el-table-column>
                <el-table-column prop="nickName" label="用户昵称" min-width="80"
                                 :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="companyName" label="公司" min-width="80"
                                 :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="createTime" label="添加时间" :show-overflow-tooltip="true"
                                 min-width="120"></el-table-column>
                <el-table-column label="操作" width="220" align="center">
                    <template #default="scope">
                        <el-button text type="warning" key="warning" :icon="Edit"
                                   @click="handleEdit(scope.$index, scope.row)" v-permiss="13">
                            编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageNum"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 新增/编辑弹出框 -->
        <el-dialog :title="dialogTitle" v-model="dialogVisible" width="40%">
            <el-form label-width="70px">
                <el-form-item label="编号" v-if="form.id">
                    <el-input v-model="form.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model="form.account"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input type="password" v-model="form.rePassword"></el-input>
                </el-form-item>
                <el-form-item label="角色" v-if="form.role != 2">
                    <el-radio-group v-model="form.role">
                        <el-radio :label="1">客户</el-radio>
                        <el-radio :label="3">系统管理员</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="save">确 定</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="basetable">
    import {ref, reactive, nextTick} from 'vue';
    import {ElMessage, ElMessageBox} from 'element-plus';
    import {Delete, Edit, Search, Plus, Document} from '@element-plus/icons-vue';
    import {
        getUserListApi, addUserApi, updateUserApi, getCompanyOptions,
    } from '../api/index';
    import address from "../assets/json/address.json";

    const query = reactive({
        account: '',
        pageNum: 1,
        pageSize: 10
    });
    const companyOptions = ref([]);
    const tableData = ref([]);
    const pageTotal = ref(0);
    const pageLoading = ref(false);
    // 获取表格数据
    const getData = async () => {
        pageLoading.value = true;
        const res = await getUserListApi(query);
        if (res) {
            tableData.value = res.data.content;
            pageTotal.value = res.data.count;
        }
        pageLoading.value = false;
    };
    getData();

    const fetchCompanyOptions = async () => {
        const res = await getCompanyOptions({state: 1});
        if (res) {
            companyOptions.value = res.data;
        }
    };
    fetchCompanyOptions();

    // 查询操作
    const handleSearch = () => {
        query.pageNum = 1;
        getData();
    };
    // 分页导航
    const handlePageChange = (val: number) => {
        query.pageNum = val;
        getData();
    };

    // 表单信息
    let form = reactive({
        id: null,
        account: '',
        password: '',
        role: '',
        nickName: '',
        companyId: '',
        updateTime: '',
        rePassword: ''
    });
    const dialogVisible = ref(false);
    const addressRef = ref();
    // 新增
    const handleAdd = async () => {
        if (form.password != form.rePassword) {
            ElMessage.warning("密码与确认密码不一致！");
            return ;
        }
        Object.keys(form).forEach((key: any) => form[key] = '');
        dialogVisible.value = true;
        await nextTick(() => {
            addressRef.value.clearSelected();
        });
    };
    // 修改
    const handleEdit = async (index: number, row: any) => {
        if (form.password != form.rePassword) {
            ElMessage.warning("密码与确认密码不一致！");
            return ;
        }
        Object.keys(form).map((name: any) => form[name] = row[name]);
        dialogVisible.value = true;
        // await nextTick(() => {
        // 	addressRef.value.initShow(form.province, form.city, form.town);
        // });
    };
    // 保存新增或修改信息
    const save = async () => {
        if (form.id) {
            const res = await updateUserApi(form);
            if (res) {
                await getData();
                dialogVisible.value = false;
                ElMessage.success(`修改成功`);
            }
        } else {
            const res = await addUserApi(form);
            if (res) {
                await getData();
                dialogVisible.value = false;
                ElMessage.success(`添加成功`);
            }
        }
    };

    // 省市区组件发生修改时同步表单信息
    // const selectedAddress = (address: any) => {
    // 	console.log("selectedAddress", address);
    // };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 180px;
    }

    .handle-input {
        width: 180px;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #F56C6C;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
</style>
